<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>新增地址</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/userInfo/xuserInfo.css">
</head>
<body>
  <!-- 增添地址 -->
  <div class="container">
    <div class="fullscreen show address">      
      <ul id="addressList">
        <li>
          <p>曾小贤</p>
          <p>联系方式：<span>112</span></p>
          <p>地址：<span>fuzhou</span></p>
          <a class="confirm-back confirm-btn" data-toggle="modal" data-target="#myModal"></a>
        </li>
        <li>
          <p>曾小贤</p>
          <p>联系方式：<span>112</span></p>
          <p>地址：<span>fuzhou</span></p>
          <a class="confirm-back confirm-btn" data-toggle="modal" data-target="#myModal"></a>
        </li>
        <li id="addAddress">
          <img src="./img/logo/add.png" class="center-absolute">
        </li>       
      </ul>
    </div>
  </div>

  <!-- 地址操作 -->
  <div class="modal fade" id="myModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg"  style="position: fixed; left: 0; right: 0; bottom: 10px;">
      <div class="btn-group-vertical" style="width: 100%; border-bottom: 2px solid #aaa;">
        <button class="btn btn-default btn-block" id="setDefault">设为默认地址</button>
        <button class="btn btn-default btn-block" id="modifyAdd">修改地址</button>
        <button class="btn btn-default btn-block" id="deleteAdd">删除地址</button>
      </div>
      <button type="button" class="btn btn-default btn-block" data-dismiss="modal">关闭</button>
    </div>
  </div>

  <!-- 添加地址 -->
  <div class="fullscreen row" id="addAddressModel">
    <form class="center-block" role="form" style="width: 80%; margin-top: 50px;">
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">收货人</span>
          <input type="text" name="name" class="form-control" style="height: 40px;" placeholder="请输入收货人，不可超过20字">
        </div>         
      </div>
      <div data-toggle="distpicker">
        <div class="form-group">
          <select class="form-control" style="height: 40px;" data-province="----- 选择省 -----"></select>
        </div>
        <div class="form-group">
            <select class="form-control" style="height: 40px;" data-city="----- 选择市 -----"></select>
        </div>
        <div class="form-group">
            <select class="form-control" style="height: 40px;" data-district="----- 选择区 -----"></select>
        </div>      
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">详细地址</span>
          <input type="text" name="address" class="form-control" style="height: 40px;" placeholder="请输入详细地址">
        </div>         
      </div>  
      <div class="form-group">
        <button class="btn btn-block btn-red" id="save">保存</button>
        <button class="btn btn-default btn-block" id="cancel">取消</button>
      </div>        
    </form>
  </div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/distpicker/distpicker.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script>
    $(function() {
      $('#addAddress').on('click', function() {
        $('#addAddressModel').fadeIn();
      });
      $('#save, #cancel').on('click', function() {
        $('#addAddressModel').fadeOut();
      });

      var _this = null;
      //当前只是单纯的切换默认图标
      $('#setDefault').on('click', function() {
        $( _this).toggleClass('confirm-front');
        $('#myModal').modal('hide');
      });
      $('.confirm-btn').on('click', function (e) {
        _this = this;    
      });
      $('#modifyAdd').on('click', function() {
        $('#myModal').modal('hide');
        $('#addAddressModel').fadeIn();
      });
      $('#deleteAdd').on('click', function() {
        $('#myModal').modal('hide');
        $(_this).parents('li').remove();
      });
    });
  </script>
</body>
</html>